<script setup lang="ts">
import AppIcon from "@/views/App/AppList/components/AppIcon.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const actives = ref([]);
interface Props {
  currentItem: API.Apppart.AppPartItem;
}
const props = defineProps<Props>();
const skipFillForm = () => {
  // 跳转填写表单页面
  router.push({
    path: "/base/app/fill",
    query: {
      formId: props.currentItem.objId,
    },
  });
};
</script>
<template>
  <div
    class="item"
    v-if="currentItem.partType === 'form'"
    @click="skipFillForm"
  >
    <AppIcon class-name="icon-app" :src="currentItem.partIcon" />
    <span class="name">{{ currentItem.partName }}</span>
  </div>
  <van-collapse v-else v-model="actives" class="collapse" :border="false">
    <van-collapse-item :name="currentItem.appPartId">
      <template #title>
        <div class="title">
          <AppIcon class-name="icon" :src="currentItem.partIcon" />
          <span class="name">{{ currentItem.partName }}</span>
        </div>
      </template>
      <Item :current-item="item" v-for="item in currentItem.children" />
    </van-collapse-item>
  </van-collapse>
</template>

<style scoped lang="scss">
.icon {
  font-size: 60px;
  width: 60px;
  height: 60px;
}
.icon-app {
  font-size: 60px;
  width: 60px;
  height: 60px;
}
.item {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  border-bottom: 1px solid #ebedf0;
  .name {
    font-size: 28px;
    font-weight: 500;
    color: #332d40;
    margin-left: 24px;
  }
}
.collapse {
  :deep(.van-collapse-item__content) {
    padding: 0;
  }
  :deep(.van-collapse-item__title--expanded:after) {
    left: 0;
    right: 0;
  }
  :deep(.van-cell) {
    padding: 20px 10px;
  }
  .collapse {
    :deep(.van-cell) {
      padding: 20px 0;
    }
  }

  border-bottom: 1px solid var(--van-cell-border-color);
  .title {
    display: flex;
    align-items: center;
  }
  .collapse {
    padding-left: 30px;
  }

  .item {
    border: none;
    padding-left: 30px;
  }
  .name {
    margin-left: 24px;
  }
}
</style>
